<template>
  <div>{{ name }}</div>
  <button @click="updateName">改名</button>
  <div>
    <table
      border
      :style="{ borderCollapse: 'collapse', width: width + 'px' }"
      id="table"
    >
      <thead>
        <tr>
          <th>1</th>
          <th>2</th>
          <th>3</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>11111111110</td>
          <td>11111111110</td>
          <td>11111111110</td>
        </tr>
        <tr>
          <td>11111111110</td>
          <td>11111111110</td>
          <td>11111111110</td>
        </tr>
        <tr>
          <td>11111111110</td>
          <td>11111111110</td>
          <td>11111111110</td>
        </tr>
      </tbody>
    </table>
  </div>
</template>
<!-- 1. -->
<!-- <script setup>
import { computed } from "vue";
import { useCounterStore } from "../hooks/counter3";
import { nextTick } from "vue";
import { useResize } from "../hooks/width1";
const store = useCounterStore();
const name = computed(() => store.name);
const updateName = () => {
  store.updateName("1111");
};

const { width } = useResize(100);

nextTick(() => {
  console.log(document.querySelector("#table"));
});
</script> -->

<!-- 2. -->
<!-- <script setup>
import { computed } from "vue";
import { useCounterStore } from "../hooks/counter3";
import { nextTick } from "vue";
import { useResize } from "../hooks/width2";
const store = useCounterStore();
const name = computed(() => store.name);
const updateName = () => {
  store.updateName("222");
};

const { width } = useResize(200);

nextTick(() => {
  console.log(document.querySelector("#table"));
});
</script> -->

<!-- 3. -->
<script setup>
import { computed } from "vue";
import { useCounterStore } from "../hooks/counter3";
import { nextTick } from "vue";
import { useResize } from "../hooks/width3";
const store = useCounterStore();
const name = computed(() => store.name);
const updateName = () => {
  store.updateName("333");
};

const { width } = useResize(300);

nextTick(() => {
  console.log(document.querySelector("#table"));
});
</script>

<style scoped></style>
